<template>
  <div class="note">
    <div class="container">
      <editor
        id="editor"
        class="ql-container"
        :placeholder="placeholder"
        :focus="focus"
        @statuschange="onStatusChange"
        @ready="onEditorReady"
      />
    </div>
    <div
      class="toolbar"
      @touchend.prevent="format"
      :style="{
        bottom: (isIOS ? keyboardHeight : 0) + 'px',
        display: keyboardHeight > 0 ? 'block': 'none',
      }"
    >
      <i
        class="iconfont icon-charutupian"
        @touchend.prevent="insertImage"
      />
      <i
        class="iconfont icon-format-header-2"
        :class="formats.header === 2 ? 'ql-active' : ''"
        data-name="header"
        :data-value="2"
      />
      <i
        :class="formats.header === 3 ? 'ql-active' : ''"
        class="iconfont icon-format-header-3"
        data-name="header"
        :data-value="3"
      />
      <i
        :class="formats.bold ? 'ql-active' : ''"
        class="iconfont icon-zitijiacu"
        data-name="bold"
      />
      <i
        :class="formats.italic ? 'ql-active' : ''"
        class="iconfont icon-zitixieti"
        data-name="italic"
      />
      <i
        :class="formats.underline ? 'ql-active' : ''"
        class="iconfont icon-zitixiahuaxian"
        data-name="underline"
      />
      <i
        class="iconfont icon--checklist"
        data-name="list"
        data-value="check"
      />
      <i
        :class="formats.list === 'ordered' ? 'ql-active' : ''"
        class="iconfont icon-youxupailie"
        data-name="list"
        data-value="ordered"
      />
      <i
        :class="formats.list === 'bullet' ? 'ql-active' : ''"
        class="iconfont icon-wuxupailie"
        data-name="list"
        data-value="bullet"
      />
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        formats: {},
        readOnly: false,
        placeholder: '开始输入...',
        editorHeight: 300,
        keyboardHeight: 0,
        isIOS: false
      };
    },
    onLoad() {
      const platform = wx.getSystemInfoSync().platform;
      this.isIOS = platform === 'ios';
      const that = this;
      this.updatePosition(0);
      let keyboardHeight = 0;
      wx.onKeyboardHeightChange(res => {
        if (res.height === keyboardHeight) {
          return;
        }
        const duration = res.height > 0 ? res.duration : 0;
        keyboardHeight = res.height;
        setTimeout(() => {
          wx.pageScrollTo({
            scrollTop: 0,
            success() {
              that.updatePosition(keyboardHeight);
              that.editorCtx.scrollIntoView();
            }
          });
        }, duration);

      });
    },
    methods: {
      format(e) {
        let { name, value } = e.target.dataset;
        if (!name) {
          return;
        }
        this.editorCtx.format(name, value);
      },
      blur() {
        this.editorCtx.blur();
      },
      onStatusChange(e) {
        this.formats = e.detail;
      },
      insertDivider() {
        this.editorCtx.insertDivider({
          success() {
            console.log('insert divider success');
          }
        });
      },
      clear() {
        this.editorCtx.clear({
          success() {
            console.log("clear success");
          }
        });
      },
      removeFormat() {
        this.editorCtx.removeFormat();
      },
      insertDate() {
        const date = new Date();
        const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        this.editorCtx.insertText({
          text: formatDate
        });
      },
      insertImage() {
        const that = this;
        wx.chooseImage({
          count: 1,
          success(res) {
            that.editorCtx.insertImage({
              src: res.tempFilePaths[0],
              data: {
                id: 'abcd',
                role: 'god'
              },
              width: '80%',
              success: function () {
                console.log('insert image success');
              }
            });
          }
        });
      },
      updatePosition(keyboardHeight) {
        const toolbarHeight = 50;
        const { windowHeight } = wx.getSystemInfoSync();
        this.editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight;
        console.log(keyboardHeight);
        this.keyboardHeight = keyboardHeight;
      },
      calNavigationBarAndStatusBar() {
        const systemInfo = wx.getSystemInfoSync();
        const { statusBarHeight, platform } = systemInfo;
        const isIOS = platform === 'ios';
        const navigationBarHeight = isIOS ? 44 : 48;
        return statusBarHeight + navigationBarHeight;
      },
      onEditorReady() {
        wx.createSelectorQuery().select('#editor').context((res) => {
          this.editorCtx = res.context;
        }).exec();
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "./iconfont.scss";

  .note {
    width: 100%;
    height: 100%;

    .container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .ql-container {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      font-size: 16px;
      line-height: 1.5;
      overflow: auto;
      padding: 10px 10px 20px 10px;
      border: 1px solid #ECECEC;
    }

    .ql-active {
      color: #22C704;
    }

    .iconfont {
      display: inline-block;
      width: 30px;
      height: 30px;
      cursor: pointer;
      font-size: 20px;
    }

    .toolbar {
      box-sizing: border-box;
      padding: 0 10px;
      height: 50px;
      width: 100%;
      position: fixed;
      left: 0;
      right: 100%;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #ECECEC;
      border-left: none;
      border-right: none;

      i {
        line-height: 50px;
      }
    }
  }
</style>
